<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>护理等级</title>
		<link rel="stylesheet" href="css/form-default.css" />
		<link rel="stylesheet" href="css/input.css" />
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style>
			table,
			th,
			td {
				border: 1px solid black;
				border-collapse: collapse;
			}
			
			th {
				width: 100px;
			}
			
			#cz {
				width: 230px
			}
			
			a{
				text-decoration: none !important;
				color: dodgerblue !important;
			}
			
			.breadcrumb>li+li:before {
				color: grey;
				content: "/ ";
				padding: 0 5px;
			}
		</style>
	</head>

	<body>
		<ul class="breadcrumb">
			<li>
				<a href="#">主页 </a>
			</li>
			<li>
				<a href="#">护理管理</a>
			</li>
			<li class="active">护理等级管理</li>
		</ul>

		<div id="tal">
			<menu style="text-align: center;">
				<button @click="query">查询所有等级</button>
				<br />
			</menu>
			<table>
				<thead>
					<tr>
						<th>序号</th>
						<th>等级</th>
						<th>名称</th>
						<th>护理内容</th>
						<th>状态</th>
						<th id="cz">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(row,i) in result.rows">
						<td>{{i+1}}</td>
						<td>{{row.level}}</td>
						<td>{{row.name}}</td>
						<td>{{row.content}}</td>
						<td v-if="row.flag===0">启用中</td>
						<td v-if="row.flag===9">未启用</td>
						<td>
							<button v-if="row.flag===0" :id="row.id" @click="deleteLevel($event)">弃用</button>
							<button v-if="row.flag===9" :id="row.id" @click="onDeleteLevel($event)">启用</button>
							<button><a :href="'modlevel.html?id='+row.id">修改内容</a></button>
						</td>
					</tr>
				</tbody>
			</table>
			<button><a href="addlevel.html">新增等级</a></button>
		</div>
	</body>
	<script src="../../common/vue.js"></script>
	<script src="../../common/axios.min.js"></script>
	<script src="../../common/jun/yi.shakeit.js"></script>
	<script src="../../common/jun/yi.toast.js"></script>
	<script src="js/yi.FrameWindow.js"></script>
	<script>
		const app = new Vue({
			el: "#tal",
			data: {
				result: {
					rows: null
				}
			},
			methods: {
				query: function() {
					axios.get("http://127.0.0.1:8080/api/level").then(function(resp) {
						if(resp.code === "ok") {
							app.result.rows = resp.data.rows;
						}
					});
				},
				deleteLevel(evt) {
					let id = evt.target.id;
					axios.delete("http://127.0.0.1:8080/api/level/" + id)
						.then(function(resp) {
							alert("更改成功")
							setTimeout(function() {
								window.location.reload();
							}, 1000);
						})
				},
				onDeleteLevel(oevt) {
					let id = oevt.target.id;
					axios.delete("http://127.0.0.1:8080/api/onlevel/" + id)
						.then(function(resp) {
							alert("更改成功")
							setTimeout(function() {
								window.location.reload();
							}, 1000);
						})
				}
			}
		});
	</script>

</html>